<template>
  <div class="main">
    <div class="login">
      <span
        class="iconfont icon-arrow-left-bold login-go"
        @click="$router.go(-1)"
      ></span>
      <span class="zc" @click="show = !show">{{
        show == true ? "注册" : "登录"
      }}</span>
     <div style="" class="logo"></div>
      <van-tabs
        v-model="activeName"
        color="#fff"
        title-active-color="#fff"
        title-inactive-color="black"
        v-show="show"
        background="transparent"
      >
        <van-tab title="账号密码登录" name="a" >
          <van-form @submit="submit">
            <van-field
              v-model="phone"
              name="用户名"
              label="用户名"
              placeholder="用户名"
              :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
              v-model="password"
              type="password"
              name="密码"
              label="密码"
              placeholder="密码"
              :rules="[{ required: true, message: '请填写密码' }]"
            />
            <div style="margin: 16px">
              <van-button
                round
                block
                type="info"
                native-type="submit"
                @click="submit"
                color="red"
                >登录</van-button
              >
            </div>
          </van-form>
          <!-- <div class="form" style="margin-top: 30px">
            <div class="item">
              <span class="iconfont icon-search"></span>
              <input type="text" placeholder="手机号码" v-model="phone" />
            </div>
            <div class="item">
              <span class="iconfont icon-search"></span>
              <input type="password" placeholder="密码" v-model="password" />
            </div>
            <div class="item">
              <div class="submit" @click="submit">提交</div>
            </div>
          </div> -->
        </van-tab>
        <van-tab title="手机验证码登录" name="b">
          <!-- <div class="from" style="margin-top: 30px">
            <div class="item">
              <span class="iconfont icon-search"></span>
              <input type="text" placeholder="手机号码" v-model="phone" />
            </div>
            <div class="item">
              <span class="iconfont icon-search"></span>
              <input type="text" placeholder="验证码" v-model="code" />
              <button class="getCode" @click="getCode">发送</button>
            </div>
            <div class="item">
              <div class="submit" @click="submitCode">提交</div>
            </div>
          </div> -->
          <van-form>
            <van-field
              v-model="phone"
              name="手机号"
              label="手机号"
              placeholder="手机号"
              :rules="[{ required: true, message: '请填写手机号' }]"
            />
           <div class="yzm-box">
              <van-field
              v-model="code"
              type="password"
              name="验证码"
              label="验证码"
              placeholder="验证码"
              :rules="[{ required: true, message: '请填写验证码' }]"
            />
            <button class="getCode" @click="getCode">发送</button>
           </div>
            <div style="margin: 16px">
              <van-button
                round
                block
                type="info"
                native-type="submit"
                @click.stop="submitCode"
                color="red"
                >登录</van-button
              >
            </div>
          </van-form>
        </van-tab>
        <van-tab title="邮箱登录" name="c">
          <!-- <div class="from">
            <div class="item">
              <span class="iconfont icon-search"></span>
              <input type="email" placeholder="邮箱" v-model="email" />
            </div>
            <div class="item">
              <span class="iconfont icon-search"></span>
              <input
                type="password"
                placeholder="邮箱密码"
                v-model="emailPassword"
              />
            </div>
            <div class="item">
              <div class="submit" @click="submitEmail">提交</div>
            </div>
          </div> -->

          <van-form>
            <van-field
              v-model="email"
              name="邮箱"
              label="邮箱"
              placeholder="邮箱"
              :rules="[{ required: true, message: '请填写邮箱' }]"
            />
            <van-field
              v-model="emailPassword"
              type="password"
              name="邮箱密码"
              label="邮箱密码"
              placeholder="邮箱密码"
              :rules="[{ required: true, message: '请填写邮箱密码' }]"
            />
            <div style="margin: 16px">
              <van-button
                round
                block
                type="info"
                native-type="submit"
                @click="submitEmail"
                color="red"
                >登录</van-button
              >
            </div>
          </van-form>
        </van-tab>
      </van-tabs>
    </div>
    
    <div class="form" v-show="!show">
      <!-- <div class="item">
        <span class="iconfont icon-search"></span>
        <input type="text" placeholder="昵称" v-model="nickname" />
      </div>
      <div class="item">
        <span class="iconfont icon-search"></span>
        <input type="text" placeholder="手机号码" v-model="phoneRet" />
      </div>
      <div class="item">
        <span class="iconfont icon-search"></span>
        <input type="password" placeholder="密码" v-model="passwordRet" />
      </div>
      <div class="item">
        <span class="iconfont icon-search"></span>
        <input type="text" placeholder="验证码" v-model="code" />
        <button class="getCode" @click="getCodeRet">发送</button>
      </div>
      <div class="item">
        <div class="submit" @click="submitZC">注册</div>
      </div> -->
      <van-form>
       <van-field
        v-model="nickname"
        name="昵称"
        label="昵称"
        placeholder="昵称"
        :rules="[{ required: true, message: '请填写昵称' }]"
      /> 
      <van-field
        v-model="phoneRet"
        name="手机号码"
        label="手机号码"
        placeholder="手机号码"
        :rules="[{ required: true, message: '请填写手机号码' }]"
      />
       <van-field
        v-model="passwordRet"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div class="yzm-box">
              <van-field
              v-model="code"
              type="password"
              name="验证码"
              label="验证码"
              placeholder="验证码"
              :rules="[{ required: true, message: '请填写验证码' }]"
            />
            <button class="getCode" @click="getCode">发送</button>
           </div>
      <div style="margin: 16px">
        <van-button
          round
          block
          type="info"
          native-type="submit"
          @click="submitZC"
          color="red"
          >注册</van-button
        >
      </div>
    </van-form>
    </div>
  </div>
</template>

<script>
import {
  getCaptchaSent,
  getCaptchaVerify,
  getLoginCellphone,
  emailLogin,
  getRegister,
  setPhone,
  getLoginCellphoneL,
} from "../api/login";
import { Toast } from "vant";
export default {
  data() {
    return {
      phone: "",
      password: "",
      code: "",
      activeName: "a",
      email: "",
      emailPassword: "",
      show: true,
      phoneRet: "",
      passwordRet: "",
      nickname: "",
    };
  },
  methods: {
    getCode() {
      // 1.验证手机号码
      let reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
      if (!reg.test(this.phone)) {
        Toast("请输入正确手机号码");
        return;
      }
      // 请求接口验证码
      getCaptchaSent({ phone: this.phone }).then((data) => {
        if (data.data) {
          Toast("验证码发送成功");
        } else {
          Toast("验证码发送失败");
        }
      });
    },
    getCodeRet() {
      // 1.验证手机号码
      let reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
      if (reg.test(this.phone)) {
        Toast("请输入正确手机号码");
        return;
      }
      // 请求接口验证码
      getCaptchaSent({ phone: this.phoneRet }).then((data) => {
        if (data.data) {
          Toast("验证码发送成功");
        } else {
          Toast("验证码发送失败");
        }
      });
    },
    submitZC() {
      getCaptchaVerify({ phone: this.phoneRet, captcha: this.code })
        .then((data) => {
          console.log(data.data);
          if (data.data) {
            setPhone({
              phone: this.phoneRet,
            }).then((data) => {
              console.log(data);
              if (data.hasPassword) {
                Toast("手机号已注册,请登录");
                this.show = !this.show;
              } else {
                getRegister({
                  // /register/cellphone?phone=13xxx&password=xxxxx&captcha=1234&nickname=binary1345
                  phone: this.phoneRet,
                  password: this.passwordRet,
                  captcha: this.code,
                  nickname: this.nickname,
                }).then((data) => {
                  console.log(data);
                });
              }
            });
          }
        })
        .catch(() => {
          Toast("验证码输入有误");
        });
    },
    submit() {
      getLoginCellphone({
        phone: this.phone,
        password: this.password,
      }).then((data) => {
        console.log(data);
        Toast("登陆成功");
        window.localStorage.setItem("token", data.token);
        window.localStorage.setItem("uid", data.profile.userId);
        this.$router.push("/recommend");
      });
    },
    submitEmail() {
      emailLogin({
        email: this.email,
        password: this.emailPassword,
      }).then((data) => {
        console.log(data);
        Toast("登陆成功");
        window.localStorage.setItem("token", data.token);
        window.localStorage.setItem("uid", data.profile.userId);
        this.$router.push("/recommend");
      });
    },
    submitCode() {
      console.log(this.phone, this.code);
      getCaptchaVerify({ phone: this.phone, captcha: this.code })
        .then((data) => {
          console.log(data.data);
          if (data.data) {
            getLoginCellphoneL({
              phone: this.phone,
              captcha: this.code,
              password: "",
            }).then((data) => {
              console.log(data);
              Toast("登陆成功");
              window.localStorage.setItem("token", data.token);
              window.localStorage.setItem("uid", data.profile.userId);
              this.$router.push("/recommend");
            });
          }
        })
        .catch(() => {
          Toast("请填写正确信息");
        });
    },
  },
};
</script>

<style lang="less">
.main {
  height: 100%;
  position: relative;
  z-index: 2;
  background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F2a522f6ea03c8bd5d9d9f51b24931e349897dba629f08-txqMSD_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641964170&t=84d2cfd1ce57ecffc5e0bdc3e993996e');
 background-size: cover;
 .yzm-box{
    position: relative;
    button{
        position: absolute;
        right: 10px;
        border: none;
        // width: 20px;
        height: 40px;
        border-radius: 6px;
        background-color:  #cccc;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 50px;
    }
  }
  .login-go {
    position: absolute;
    top: 16px;
    left: 16px;
    font-size: 16px;
    color: #000;
  }
  .zc {
    position: absolute;
    /* right: 0; */
    right: 16px;
    top: 16px;
    color: rgb(241, 239, 239);
    border-radius: 6px;
  }
}
.login {
  // background-color:rgb(212,68,57);
  width: 100%;
  height: 100%;
  color: #fff;
  .yzm-box{
    position: relative;
    button{
        position: absolute;
        right: 10px;
        border: none;
        // width: 20px;
        height: 40px;
        border-radius: 6px;
        background-color: #cccc;
        
        top: 0;
        bottom: 0;
        margin: auto;
        width: 50px;
    }
  }
}

.van-tab__pane,
.van-tab__pane-wrapper {
  .item {
    width: 76%;
    height: 30px;
    line-height: 30px;
    margin: 0 auto;
    background-color: #f47378;
    border-radius: 30px;
    margin-bottom: 12px;
    input {
      background-color: transparent;
      border: 0px;
      outline: none;
      text-indent: 0.5em;
      font-size: 14px;
      color: #fff;
    }
    span {
      font-size: 20px;
      margin-left: 10px;
      display: inline-block;
      vertical-align: middle;
    }
    .getCode {
      border: 1px solid #fff;
      height: 20px;
      line-height: 20px;
      width: 50px;
      border-radius: 20px;
      font-size: 12px;
      color: #808080;
      float: right;
      margin: 5px;
    }
    .submit {
      font-size: 15px;
      background-color: #fff;
      text-align: center;
      color: #d4473c;
      border-radius: 15px;
    }
  }
}
.van-tabs {
  position: absolute;
  top: 300px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  margin: auto;
    .van-cell{
    background-color:transparent;
    .van-field__label{
      color: #000;
    }
  }
}
.form {
  position: fixed;
  top: 300px;
  left: 0px;
  right: 0px;

  .item {
    width: 76%;
    height: 30px;
    line-height: 30px;
    margin: 0 auto;
    background-color: #f47378;
    border-radius: 30px;
    margin-bottom: 12px;
    input {
      background-color: transparent;
      border: 0px;
      outline: none;
      text-indent: 0.5em;
      font-size: 14px;
      color: #fff;
    }
    span {
      font-size: 20px;
      margin-left: 10px;
      display: inline-block;
      vertical-align: middle;
    }
    .getCode {
      border: 1px solid #fff;
      height: 20px;
      line-height: 20px;
      width: 50px;
      border-radius: 20px;
      font-size: 12px;
      color: #808080;
      float: right;
      margin: 5px;
    }
    .submit {
      font-size: 15px;
      background-color: #fff;
      text-align: center;
      color: #d4473c;
      border-radius: 15px;
    }
  }
}
</style>